<template>
    <div class="home2_cygn">
			<div class="home2_cygn_title">
				<div class="subtitle"><span></span>常用功能</div>
				<div class="home2_cygn_sz" @click="openRoleRouterFuncModel"><img src="@/assets/img/home2/icon_sz.svg" alt="" />设置</div>
			</div>
			<zh-dialog title="设置常用菜单" width="40%" v-model="state.roleRouterFuncVisible" @confirm="saveRouterFunc">
				<router-func-tree-form ref="routerFuncTreePage" :userId="state.userId" v-model="state.roleRouterFuncVisible" type="myMenu" @refresh="init" />
			</zh-dialog>
			<div class="home2_cygn_con">
				<div
					class="home2_cygn_con_item"
					:style="setBg(index)"
					v-for="(item, index) in state.cygnList"
					:key="index"
					@click="changeRouter(item)"
				>
					<svg class="icon" aria-hidden="true" style="font-size: 1em">
						<use :xlink:href="`#${item.iconImgUrl}`"></use>
					</svg>
					<div style="margin-top: 0.5em">
						{{ item.title }}
					</div>
				</div>
			</div>
		</div>
</template>
<script lang="ts" setup name="myMenuPage">
import { verifyUrl } from '@/utils/toolsValidate';
import bgQsgl from '@/assets/img/home2/bg_qsgl.svg';
import bgCjgl from '@/assets/img/home2/bg_cjgl.svg';
import bgPkxt from '@/assets/img/home2/bg_pkxt.svg';
import bgGzgl from '@/assets/img/home2/bg_gzgl.svg';
//新增
import RouterFuncTreeForm from '@/views/system/user/component/RouterFuncTreeForm.vue';
const VITE_APP_ID = import.meta.env.VITE_APP_ID as string;
//------------------定义子组件---------------------------
const routerFuncTreePage = ref<any>({});
const router = useRouter();
//------------------内部变量定义-------------------------
const state = reactive({
	cygnList: [] as any,
	roleRouterFuncVisible: false,
	userId: $store.user.userInfo?.userId as any,
});
//------------------定义调用方法-------------------------
const init = () => {
	$api.common.send.post('userMenu0007', {useType:'pc',appId:VITE_APP_ID,pageNum:1,pageSize:4}).then((res) => {
		state.cygnList = res.result.list;
	});
};
function saveRouterFunc() {
	routerFuncTreePage.value.saveRouterFunc();
}
const setBg = (item) => {
	let result = {
		backgroundImage: `url(${item})`,
		backgroundSize: '100%',
		backgroundRepeat: 'no-repeat',
	};
	if (item == 0) {
		result.backgroundImage = `url(${bgPkxt})`;
	} else if (item == 1) {
		result.backgroundImage = `url(${bgCjgl})`;
	} else if (item == 2) {
		result.backgroundImage = `url(${bgQsgl})`;
	} else if (item == 3) {
		result.backgroundImage = `url(${bgGzgl})`;
	}
	return result;
};
const changeRouter = (item:any) => {
	if(item.isLink==='1'){
		const { origin, pathname } = window.location;
		if (verifyUrl(item.linkUrl)) {
			window.open(item.linkUrl);
		}else {
			window.open(`${origin}${pathname}#${val.meta.isLink}`);
		}
	}else{
		router.push({ path: item.linkPath });
	}
	
	
};
const onALinkClick = (val: any) => {
			const { origin, pathname } = window.location;
			router.push(val.path);
      console.log(val.meta.isLink)
			
		};
function openRoleRouterFuncModel() {
	// 打开资源授权页面
	state.roleRouterFuncVisible = true;
}

//-------------------------初始化-----------------------------
onMounted(() => {
	nextTick(() => {
		if(state.cygnList.length>0){
			return
		}
		init();
	});
});
</script>
<style scoped lang="scss">

.icon {
	width: 3em;
	height: 3em;
	vertical-align: -0.15em;
	fill: currentColor;
	overflow: hidden;
}
.home2 {
	&_cygn {
		margin: 0 24px 24px;

		&_title {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		&_sz {
			font-size: 1rem;
			color: #1868fd;
			display: flex;
			align-items: center;
			cursor: pointer;
		}

		&_con {
			margin-top: 3.64rem;
			display: flex;

			&_item {
				font-family: YouSheBiaoTiHei;
				font-size: 24px;
				color: rgba(0, 62, 99, 0.8);
				letter-spacing: 0;
				font-weight: 400;
				height: 11.43rem;
				width: 25%;
				padding-left: 2.86rem;
				line-height: 11.43rem;

				svg {
					position: absolute;
					margin-left: -14px;
					margin-top: -41px;
				}
			}
		}
	}
}

.subtitle {
	font-family: PingFangSC-Regular;
	font-size: 18px;
	color: rgba(0, 0, 0, 0.85);
	letter-spacing: 0;
	line-height: 22px;
	display: flex;
	align-items: center;

	span {
		display: inline-block;
		width: 5px;
		height: 18px;
		margin-right: 8px;
		background-color: #1868fd;
	}
}
@media screen and (min-width: 1500px) and (max-width: 1800px) {

	.home2_cygn_con_item {
		height: 9.2rem;
		line-height: 9.2rem;
	}
	
}

// @media screen and (min-width: 1200px) and (max-width: 1500px) {
@media (max-width: 1500px) {
	
	.home2_cygn_con_item {
		height: 9.2rem;
		line-height: 9.2rem;
	}
	
}

</style>